<template>
    <div style="min-width: 829px">
        <div v-if="$route.path == '/feedbackReport'">
            <div class="vs-search-box">
                <el-form ref="form" v-search-box-enter :inline="true" :model="paging" label-width="110px">
                    <el-form-item label="反馈类型：">
                        <el-select style="width: 200px" clearable v-model="paging.type" placeholder="请选择">
                            <el-option label="投诉" value="1"> </el-option>
                            <el-option label="建议" value="2"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="查询时间段：">
                        <el-date-picker v-model="bill_time_start" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" style="width: 300px"> </el-date-picker>
                    </el-form-item>
                    <el-form-item class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <!-- <div class="operation-box clear-float">
                    <el-button @click="utils.goUrl('/inInfo?type=2')" type="primary">新增</el-button>
                </div> -->
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%" border ref="multipleTable">
                    <!-- <el-table-column type="selection" width="55" align="center"> </el-table-column> -->
                    <el-table-column prop="create_time" label="日期" align="center"></el-table-column>
                    <el-table-column prop="val1" label="反馈类型" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.type == 1 ? '投诉' : '建议' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="user.avatar" label="头像" align="center">
                        <template slot-scope="scope" v-if="scope.row.user && scope.row.user.avatar">
                            <el-image class="vs-image-table" :src="scope.row.user.avatar" fit="cover" :preview-src-list="scope.row.user.list"> </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="user.nickname" label="昵称" align="center"> </el-table-column>
                    <el-table-column prop="user.phone" label="手机号" align="center"> </el-table-column>
                    <el-table-column prop="content" label="反馈内容" align="center"></el-table-column>
                    <el-table-column prop="reply_content" label="回复内容" align="center"></el-table-column>
                    <el-table-column fixed="right" width="160" label="操作" align="center">
                        <template slot-scope="scope">
                            <span @click="setRow(1, scope.row)" class="tab-table-text">详情</span>
                            <span @click="setRow(2, scope.row)" class="tab-table-text" v-if="!scope.row.reply_content">回复</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" :page-sizes="[100, 200, 500, 1000]"> </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                bill_time_start: [],
                paging: {
                    type: '',
                    page: 1,
                    total: 0,
                    limit: 100,
                },
                tableData: [],
                multipleSelection: '',
            };
        },
        created() {
            if (this.$route.path == '/feedbackReport') {
                this.handleCurrentChange(1);
            }
        },
        methods: {
            async setRow(type, row) {
                if (type == 1) {
                    this.utils.goUrl(`/feedbackReportInfo?id=${row.id}`);
                } else {
                    this.$prompt('回复内容', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputErrorMessage: '请输入回复内容',
                        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
                        inputType: 'textarea',
                    }).then(async ({ value }) => {
                        let { code, data } = await this.$Http.replyFeedback({ id: row.id, reply_content: value });
                        if (code) {
                            this.$message.success('回复成功！');
                            this.handleCurrentChange();
                        }
                    });
                }
            },
            async repairGetList() {
                if (!this.bill_time_start) {
                    this.bill_time_start = [];
                }
                this.paging.date_start = this.bill_time_start[0] || '';
                this.paging.date_end = this.bill_time_start[1] || '';
                let obj = Object.assign({}, this.paging);
                this.loading = true;
                let { code, data } = await this.$Http.getFeedback(obj);
                this.loading = false;
                if (code) {
                    this.tableData = data.data;
                    this.paging.total = data.total;
                    for (let i in this.tableData) {
                        if (this.tableData[i].user && this.tableData[i].user.avatar) {
                            this.$set(this.tableData[i].user, 'list', this.tableData[i].user.avatar.split(','));
                        }
                    }
                }
            },
            reset() {
                //重置
                this.paging = this.$options.data().paging;
                this.handleCurrentChange(1);
            },
            handleSizeChange(val) {
                this.paging.limit = val;
                this.repairGetList();
            },
            handleCurrentChange(val) {
                this.paging.page = val;
                this.repairGetList();
            },
        },
    };
</script>

<style lang="scss" scoped>
    .image-thumbnail {
        width: 130px;
        height: 130px;
    }
</style>
